<!--
 * @Descripttion: 
 * @Author: voanit
 * @Date: 2022-09-09 09:07:56
 * @LastEditors: voanit
 * @LastEditTime: 2022-09-09 09:58:19
-->

<script lang="ts" setup name="XtxButton">
/* XtxButton */
/**
 * @name:按钮组件
 * @return {*}
 * 属性    默认值   类型         说明
 * type             string
 * size             string
 * color            string
事件
btn
close
 */
defineProps({
  type: {
    type: String,
  },
  size: {
    type: String,
  },
  color: {
    type: String,
  },
});

// const emit = defineEmits(["btn", "close"]);
const emit = defineEmits<{
  (e: "btn", val: string): void;
  (e: "close", val: string): void;
}>();

const handle = () => {
  emit("btn", "btn参数");
  emit("close", "close参数");
};
</script>
<template>
  <div @click="handle" :class="[type, size]" :style="{ color: color }"><slot></slot></div>
</template>
<style lang="less" scoped>
div {
  padding: 10px;
  display: inline-block;
  border-radius: 10px;
}
.primary {
  background: #66b1ff;
}
.success {
  background: #85ce61;
}
.danger {
  background: #f78989;
}
.small {
  padding: 10px 20px;
}
.medium {
  padding: 10px 40px;
}
.mini {
  padding: 10px;
}
</style>
